import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_aapstroe/heroPage.dart';

class todayPage extends StatefulWidget {
  @override
  _todayPageState createState() {
    // TODO: implement createState
    return _todayPageState();
  }
}
class _todayPageState extends State<todayPage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Container(
        padding: EdgeInsets.only(left: 20,right: 20),
        child: CustomScrollView(
        slivers: <Widget>[
          //将头部放入SliverToBoxAdapter一起滑动
          SliverToBoxAdapter(
            child: TimeTitle(),
          ),
          //创建一个可滑动的listview，因为在CustomScrollView中，要用SliverList,grid视图要用SliverGridlist
          SliverList(delegate: SliverChildBuilderDelegate(
            (context,index){
              return ItemCard(tag:"${index}");
            },
            childCount: 10
          ),
          )
        ],
      ),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

//卡片，涉及到动画操作，所以用了Statefulwidget
class ItemCard extends StatefulWidget{
  String tag;
  ItemCard({Key key,this.tag}):super(key:key);
  @override
  _ItemCardState createState() {
    return _ItemCardState();
  }
}
class _ItemCardState extends State<ItemCard> with SingleTickerProviderStateMixin{
  AnimationController controller;
  Animation animation;
  @override
  void initState() {
    super.initState();
    //初始化动画控制器配置参数
    controller=AnimationController(vsync:this,duration: Duration(microseconds: 200));
    //设置动画的属性
    animation=Tween(begin: 1.0,end: 0.95).animate(controller);
  }
  @override
  Widget build(BuildContext context) {
    //使用自定义动画组件ItemCard_Animation
    return ItemCard_Animation(
      controller: controller,
      animation: animation,
      tag:widget.tag
    );
  }
}

//自定义动画组件
class ItemCard_Animation extends AnimatedWidget{
  AnimationController controller;
  Animation animation;
  String tag;
  ItemCard_Animation({this.animation,this.controller,this.tag}):super(listenable:controller);
  @override
  Widget build(BuildContext context) {
    // 缩放组件
    return ScaleTransition(
      scale: animation,
      //可点击组件
      child: GestureDetector(
        //设置按下的时候缩小
          onTapDown: (DragDownDetails){
                controller.forward();            
          },
          //取消点击操作恢复
          onTapCancel: (){
                  controller.reverse();
          },
          //松开后操作：延迟200毫秒跳转到详情页，并恢复
          onTapUp: (DragDownDetails){           
                new Future.delayed(Duration(milliseconds: 200),(){
                  Navigator.of(context).push(MaterialPageRoute(
                  builder:(context){
                    return heroPage(tag:tag);
                  } )
                  );
                  controller.reverse();
                });
          },
          //用Hero包裹，设置飞越动画
          child: Hero(
            transitionOnUserGestures: true,
            //因为每个组件的tag不能相同，否则会造成冲突，所以tag设置为变量，动态变化
            tag:tag,
            child: Container(
              height: 500,
              width: double.infinity,
              margin: EdgeInsets.only(bottom: 15),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
              ),
              child: ClipRRect(
                child: Image.asset("images/ban1.png",fit: BoxFit.cover),
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ),
        ),
    );
  }
}

//头部
class TimeTitle extends StatefulWidget{
  @override
  _TimeTitleState createState() {
    return _TimeTitleState();
  }
}
class _TimeTitleState extends State<TimeTitle>{
  DateTime time;
  //设置数组，根据获得的weekday的值来设置星期数
  List weekday=[
    "日",
    "一",
    "二",
    "三",
    "四",
    "五",
    "六",
  ];
  int w;
  @override
  void initState() {
    super.initState();
    //获取当前的时间
    time=new DateTime.now();
    if(time.weekday<7){
      w=time.weekday;
    }
    w=0;
  }
  @override
  Widget build(BuildContext context) {
    //头部包含两个部分，上面的日期，下方的标签和头像
    return Container(
      margin: EdgeInsets.only(bottom: 10,top: 35),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          //上部分的时间
          Container(
            margin: EdgeInsets.only(bottom: 5),
            child: Text(
                "${time.month}月${time.day}日"+"星期${weekday[w]}",
                style: TextStyle(
                  color: Color.fromRGBO(138, 137, 142, 1)
                  ),
                ),
          ),
          //下部分的标签和头像
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text("Today",style: TextStyle(fontSize: 30,fontWeight: FontWeight.w700),),
              GestureDetector(
                child: Image.asset("images/person.png",width: 35,),
                onTap: (){

                },
              ),
            ],
          )
        ],
      ),
    );
  }
}